Hi everyone in this blog, I’m explaining about Pseudo class.

Description:

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic — they’re applied as a result of user interaction with the document.

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use Javascript or any other script to use those effects. A simple syntax of pseudo-classes is as follows:

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document. In CSS1, all three pseudo-classes were mutually exclusive.

CSS2 expanded the range of pseudo-classes and ensured that they could be applied to any element. :link and :visited now apply to any element defined as a link in the document language. While they remain mutually exclusive, the :active pseudo-class now joins :hover and :focus in the group of dynamic pseudo-classes. The :hover pseudo-class matches elements that are being designated by a pointing device (for example, elements that the user’s hovering the cursor over); :active matches any element that’s being activated by the user; and :focus matches any element that is currently in focus (that is, accepting input).

CSS2 also introduced the :lang pseudo-class to allow an element to be matched on the basis of its language, and the :first-child pseudo-class to match an element that’s the first child element of its parent.

Anchor Pseudo-Class list:

1.       A:link{}: Unvisited link

2.       A:hover{}: Mouse over link

3.       A:visited{}: visited link

4.       A:active{}: Selective link

HTML Code:

<divclass="menu">
    <ul>
        <li>
            <ahref="#">HOME</a></li>
        <li>
            <ahref="#">NEWS</a></li>
        <li>
            <ahref="#">ARTICLE</a></li>
        <li>
            <ahref="#">BLOGS</a></li>
        <li>
            <ahref="#">ABOUT</a></li>
    </ul>
</div>

CSS:

.menu {
        width:70%;
        margin:0auto;
        background-color:#bcd006;
        height:50px;
    }
    .menuulli{
        padding:10px;
        list-style:none;
        display:inline-block;
        width:17%;
    }

Output:

 Use Pseudo-Class a:hover{}:

Following is the example which demonstrates how use :hover class to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

The color of the text changes when you hover the mouse over the link.

A:hover {
        color:#fff;
    }

Output:

Use Pseudo-Class a:link{}:

Following is the example which demonstrates how to use :link class to set the link color. Possible value could be any color name in any valid format.

A:link {
        text-decoration:none;
    }

Output:

Use Pseudo-Class a:visited{}:

Following is the example which demonstrates how to use :visited class to set the color of visited links. Possible value could be any color name in any valid format.

A:visited {
        color:#f00;
    }

Output:

Use Pseudo-Class a:active{}:

Following is the example which demonstrates how to use :active class to change the color of active links. Possible value could be any color name in any valid format.

A:active {
        color:#fff;
        background-color:#808080;
    }

Output:

  in my next post i'll explain about Error handling in CSS